import Todo from './Todo';

const TodoList = ({todos, deleteTodo, toggleTodo}) => {
    if (todos.length === 0) {
        return <p>No tasks available</p>;
    }

    return (
        <table className="table">
            <thead>
            <tr>
                <th className="col-1">#</th>
                <th className="col-9">Tasks</th>
                <th className="col-1">Delete</th>
                <th className="col-1">Complete</th>
            </tr>
            </thead>
            <tbody>
            {todos.map((todo, index) => (
                <Todo key={todo.id} todo={todo} index={index} deleteTodo={deleteTodo} toggleTodo={toggleTodo}/>
            ))}
            </tbody>
        </table>
    );
}

export default TodoList;
